<template>
  <div>
    <div class="table-title">
      <span>{{ tabTitle }}</span>
      <el-button type="primary" plain size="small" @click="addVisualDevices">新增视频源</el-button>
    </div>

    <div class="table-container">
      <el-table
        :data="tableData"
        border
        stripe
        size="mini"
        max-height="600px"
        style="width: 100%; margin-top: 20px;">
        <el-table-column type="index" label="No" :index="indexMethod"></el-table-column>
        <el-table-column prop="gradeName" label="班级"></el-table-column>
        <el-table-column prop="cameraName" label="设备名称"></el-table-column>
        <el-table-column prop="url" label="设备地址" width="280"></el-table-column>
        <el-table-column prop="createDate" label="时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="editVisualDevicesInfo(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="delVisualDevicesInfo(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
    </div>



    <el-dialog :title="dialogTitle" width="580px" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="班级" :label-width="formLabelWidth">
          <el-select v-model="classId" size="small" filterable class="form-width" placeholder="请选择">
            <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称" :label-width="formLabelWidth">
          <el-input v-model="cameraName" size="small" class="form-width" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="设备地址" :label-width="formLabelWidth">
          <el-input v-model="url" type="textarea" :rows="4" size="small" class="form-width" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitFormInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/pagination/Pagination";
import httpInterface from "../../utils/httpInterface";
import { errorMessage, successMessage } from "../../utils/validate";
import { mapState } from "vuex";

export default {
  name: "VisualManage",
  components: {
    Pagination
  },
  data() {
    return {
      tableData: [],
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      },
      formLabelWidth: '70px',
      dialogFormVisible: false,
      dialogTitle: "添加设备",
      classId: "",
      cameraName: "",
      url: "",
      id: "0"
    }
  },

  props: {
    tabTitle: String
  },

  computed: {
    ...mapState(["gradeList"])
  },

  methods: {
    indexMethod(index) {
      return index + 1;
    },

    //新增视频源
    addVisualDevices() {
      this.dialogFormVisible = true;
      this.classId =  "";
      this.cameraName =  "";
      this.url =  "";
      this.id = "0";
    },

    pageNumData(page) {
      this.pageData.pageNum = Number(page);
      this.getVisualDevicesList();
    },

    pageSizeData(page) {
      this.pageData.pageSize = Number(page);
      this.getVisualDevicesList();
    },

    getVisualDevicesList() {
      let params = {
        page: this.pageData.pageNum,
        size: this.pageData.pageSize
      };
      httpInterface.requestGet(httpInterface.URL_CAMERA_LIST, params, res => {
        let { code, body } = res.data;
        if (code == 200) {
          body.rows.forEach(item => {
            this.gradeList.forEach(key => {
              if (item.classId = key.id) {
                item.gradeName = key.name;
              }
            })
          })
          this.tableData = body.rows;
          this.pageData.total = Number(body.total);
        } else {
          errorMessage("视频数据加载失败！");
        }
      }, null)
    },

    editVisualDevicesInfo(row) {
      this.dialogFormVisible = true;
      this.classId = row.classId;
      this.cameraName = row.cameraName;
      this.url = row.url;
      this.id = row.id;
    },

    delVisualDevicesInfo(row) {
      this.$confirm('此操作将永久删除这条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.id
        };
        httpInterface.requestGet(httpInterface.URL_CAMERA_DELETE, params, res => {
          let { code } = res.data;
          if (code == 200) {
            this.getVisualDevicesList();
            successMessage("删除成功！");
          } else {
            errorMessage("删除失败！");
          }
        }, null)
      }).catch(() => {});
    },

    submitFormInfo() {
      let { id, cameraName, url, classId } = this;
      let params = {
        cameraName, url, classId
      };
      if (id != 0) {
        params.id = id;
      };
      let path = id == 0 ? httpInterface.URL_CAMERA_ADD : httpInterface.URL_CAMERA_UPDATE;
      httpInterface.requestPost(path, params, res => {
        let { code } = res.data;
        if (code == 200) {
          this.dialogFormVisible = false;
          this.getVisualDevicesList();
        } else {
          errorMessage("操作失败!");
        }
      }, null, false)
    }
  }
}
</script>

<style scoped>
.table-title {
  margin-top: -5px;
}

.form-width{
  width: 270px;
}

.el-dialog__wrapper >>> .el-dialog .el-dialog__body {
  padding: 10px 20px;
}

.el-dialog__wrapper >>> .el-dialog .el-dialog__body .el-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.el-dialog__wrapper >>> .el-dialog .el-dialog__body .el-form .el-form-item{
  margin: 5px 0;
}

.el-dialog__wrapper >>> .el-dialog{
  margin-top: 10% !important;
}

.el-textarea{
  margin-top: 6px;
}
</style>
